<template>
	<!-- 设备页 -->
	<view class="lockParent">
		<cu-custom  bgColor="bg-black-two"  :isBack="false">
			<block slot="content">设备</block>
		</cu-custom>
		<view class="flex flex-wrap margin-xs">
			<view v-for="(item,index) in machineArray" :key="index" 
				 class="basis-df margin-xs" style="background-color: #2D2D3D;width: 47%;    padding: 10px;border-radius: 13px;">
				<view class="flex">
					<view class="flex-treble text-white text-bold" style="font-size: 15px;">{{item.machine_name}}</view>
					<view class="flex-sub text-right" style="margin-top: -6px;margin-right: -8px;">
						<!-- <text class="lg text-gray" :class="'cuIcon-' + item.name"></text> -->
						<text :class="'cuIcon-' + 'title'+'  '+item.className" 
							style=""></text>
					</view>
				</view>
				<!-- 离线 -->
				<view v-if="item.machine_status == 4">
					<view v-if="item.machine_off_time == null">
						<view>未接入</view>
						<view class="padding-top-sm text-white" style="padding-bottom: 65px;"></view>	
					</view>
					<view v-else>
						<!-- 最后一次更新时间 -->
						<view>离线时间</view>
						<view class="padding-top-sm text-white" style="padding-bottom: 48px;">
							{{item.machine_off_time | nullzhuantime}}
						</view>	
					</view>				
				</view>
				<view v-else>
					<view class="margin-xs text-gray" style="margin-left: 0px;">
						产量/件
					</view>
					<view class="margin-xs text-white" style="margin-left: 0px;">
						{{item.machine_shift_output | nullzhuanzero}}
					</view>
					<view class="margin-xs text-gray" style="margin-left: 0px;">
						实际加工节拍
					</view>
					<view class="margin-xs text-white" style="margin-left: 0px;">
						{{item.machine_product_currtime | nullzhuanzero}}
					</view>
				</view>
				
				<view @click="linktoPage('/pages/machine/machine-detail',item.machine_id)" 
					class="margin-xs text-right" style="color: #22B472;margin-right: -2px;">
					设备详情
					<text :class="'cuIcon-' + 'right'"
						style="color: #22B472;font-weight: bold;font-size:8px"></text>
					<text :class="'cuIcon-' + 'right'"
							style="color: #22B472;font-weight: bold;font-size:8px"></text>
				</view>
				
	
				
			</view>
	
			
		</view>
		<!-- 判断模块是否解锁 0：加锁，1：解锁 -->
		<view
			v-if="!moduleLockList.machine1.status"
			@click="showModal('DialogModal1',moduleLockList.machine1)"
			class="lockView" style="bottom: 0;height: 20%;position: fixed;top: unset;border-radius: 0px;background-color: unset;">
			<image src="@/static/image/machine-lock.png" mode="aspectFit"></image>
		</view>
	
	
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog bg-white" style="height: 100px;width: 80%;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two" style="font-size: 14px;">提示</view>
				</view>
				<!-- 提示3：橙色 #ff5722  错误2：红色 red   正确1：绿色 #00A99D  -->
				<view v-if="tipFlag == 3" class="text-black-two" style="font-size: 16px;color: #ff5722;">
					{{resText}}
				</view>
				<view v-else-if="tipFlag == 2" class="text-black-two" style="font-size: 16px;color: red;">
					{{resText}}
				</view>
				<view v-else="tipFlag == 1" class="text-black-two" style="font-size: 16px;color: #00A99D;">
					{{resText}}
				</view>
			</view>
		</view>
		
		<!-- 购买模块 模态框 -->
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog bg-white" style="border-radius: 13px;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two">解锁模块</view>
				</view>
				<view class="margin-bottom-sm">
					<view>
						<image mode='widthFix' src="@/static/image/unLock.png" class="tip-img"></image>
					</view>
					<view>
						<text style="color: #00A99D;font-size: 30px;">{{modulePrice}}</text>
						<text class="text-gray padding-left-xs" style="font-size: 14px;">元</text>
					</view>
					<view class="text-gray" style="font-size: 15px;">
						您确认开通此模块？
					</view>
				</view>
				<view class="cu-bar padding-bottom-sm" style="height: 80px;">
					<view class="action margin-0 flex-sub text-green" @tap="hideModal">
						<button class="cu-btn round lines-green-two padding-lr-lg" style="width: 90%;height: 45px;">
							<text class="text-gray">取消</text>
						</button>
					</view>
					<view class="action margin-0 flex-sub">
						<button  @click="showModalInvoice('fapiaoTip')" class="cu-btn round bg-green-two padding-lr-lg" style="width: 90%;height: 45px;">确认去开票</button>
					</view>
				</view>
			</view>
		</view>		
		<!-- 发票过渡提醒框 -->
		<view class="cu-modal" :class="modalName=='fapiaoTip'?'show':''">
			<view class="cu-dialog bg-white" style="border-radius: 13px;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two">发票提醒</view>
				</view>
				<view class="margin-bottom-sm">
					<view>
						<image src="@/static/image/fapiao-tip.png"  mode='widthFix' class="tip-img"></image>
					</view>
					<view class="text-black-two padding-top-sm" style="font-size: 15px;">
						感谢您信任并使用我司开发的产品！
						<br/>
						我司的电子发票统一采取国家税务局
						<br/>
						认证的电子普票。
					</view>
				</view>
				<view class="cu-bar padding-bottom-sm" style="justify-content: center;height: 80px;">
					<view><image src="@/static/image/fapiao-gif.gif" style="width: 64px;height: 64px;"></image></view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>	
	//post API
	import {requestPost} from '@/common/util.js'
	
	var _self;
	export default {
		components: {
			
		},
		data() {
			return {
				moduleLockList:[],//模块列表
				machineArray:[
					{machine_id:1,className:'',machine_name:'M1',classText:'',statusText:'',machine_status:1},
					{machine_id:2,className:'',machine_name:'M1',classText:'',statusText:'',machine_status:1},
					{machine_id:3,className:'',machine_name:'M1',classText:'',statusText:'',machine_status:2},
					{machine_id:4,className:'',machine_name:'M1',classText:'',statusText:'',machine_status:3},
					{machine_id:5,className:'',machine_name:'M1',classText:'',statusText:'',machine_status:4},
					{machine_id:6,className:'',machine_name:'M1',classText:'',statusText:'',machine_status:0},
					{machine_id:7,className:'',machine_name:'M1',classText:'',statusText:'',machine_status:0},
				],
				moduleLockList:[],//模块列表
				modalName:null,//弹出是否解锁模块的模态框
				modulePrice:0,//模块价格
				buyModuleInfo:[],//购买当前模块的模块信息
				resText:'',
				tipFlag:0,//提示flag(1:正确，2：错误，3：提示)
			}
		},
		onShow() {
			_self = this;
			//获取模块购买列表
			this.getModelLockData();
			//获取设备信息
			this.getInitData();
		},

		onHide() {
			this.modalName = null
		},
		//过滤器
		filters: {
			nullzhuanzero(msg) {
				return '' == msg ? 0 : msg;
			},
			nullzhuantime(msg){
				return null == msg ? '----' : msg;
			}
		},
	
		methods:{
			//获取模块列表，判断是否购买，未购买则加锁
			async getModelLockData(){
				// position =>  1:首页，2:设备，3:能耗，4:报表
				let [err,res] = await this.$http.post('getModelList',{position:2},{
					token:true,
					checkToken:true ,
				});
				//status：0（加锁），1：解锁
				this.moduleLockList = res.data.data;
			},
			//获取设备信息
			async getInitData(){
				uni.showLoading({ title: '加载中...', mask: true });
				// 请求登录
				let [err,res] = await this.$http.post('getMachineList',{},{
					token:true,
					checkToken:true ,
				});
				uni.hideLoading();
				this.machineArray = res.data.data;
				//0：停止,1：运行,2：报警,3：离线
				_self.machineArray.forEach(item =>{
					switch (item.machine_status){
						case 0:
							item.className="machine-stop";
							item.statusText="暂停中";
							item.classText="text-stop";
						break;
						case 1:
							item.className="machine-run";
							item.statusText="运行中";
							item.classText="text-run";
						break;
						case 2:
							item.className="machine-alarm";
							item.statusText="报警中";
							item.classText="text-alarm";
						break;
						case 3:
							item.className="machine-debug";
							item.statusText="调机中";
							item.classText="text-debug";
						break;
						case 4:
							item.className="machine-off";
							item.statusText="离线中";
							item.classText="text-off";
						break;
						default:
							item.className="machine-off";
							item.statusText="离线中";
							item.classText="text-off";
						break;
					}
				})
			},
			
	
		
			//打开设备详情页
			linktoPage(urlStr,id){
				//0（加锁），1：解锁
				if(this.moduleLockList.machine1.status){
					uni.navigateTo({
						url:urlStr+'?machineId='+id
					})
				} else {
					//先判断是否解锁，未解锁提示，已解锁再跳转
					this.showModalTip('请先解锁设备详情模块',3);
					setTimeout(function () {
						_self.hideModalTip();
					}, 2000);
				}	
			},
			//打开设备详情页
			showDetail(id){
				uni.navigateTo({
				    //url: 'test?id=1&name=uniapp'
					url: './machine-detail?machineId='+id
				});	
			},
			
			
			
			//打开模态框
			showModal(name,data=null){
				this.modalName=name
				this.buyModuleInfo = data;//购买该模块的信息
				this.modulePrice = data.module_price;//购买该模块的价格
			},
			//隐藏模态框
			hideModal(e) {
				this.modalName = null
			},
			
			//打开模态框
			showModalTip(val,isflag){
				this.modalName='Modal';
				this.resText = val;
				this.tipFlag = isflag;
			},
			//隐藏模态框
			hideModalTip(e) {
				this.modalName = null
				this.resText = '';
			},
			//发票过渡
			showModalInvoice(name){
				//获取当前登录用户实时余额
				let currentYue = uni.getStorageSync("userinfo").money;
				console.log(currentYue);
				//获取用户余额，判断余额是否足够
				if (parseInt(currentYue) >= parseInt(this.modulePrice)) {
					//余额足够跳转到发票页
					this.modalName=name;
					setTimeout(function () {
						_self.modalName = null
						_self.buyModule();
					},3000);
				} else {
					//余额不足提示请充值，跳转到余额充值页
					this.showModalTip('余额不足请充值',3);
					setTimeout(function () {
						_self.hideModalTip();
						uni.navigateTo({
							url:'/pages/center/yue/yue',
						})
					}, 2000);
				}
			},
			//确认购买模块跳转到发票页
			buyModule(){
				//购买该模块的信息
				let data = JSON.stringify(this.buyModuleInfo);
				uni.navigateTo({
					url:'/pages/center/fapiao/buy-module-fapiao?moduleInfo='+data,
				})	
			},
		}
	}
</script>

<style>
	.basis-df{
		flex-basis:47%;
	}
	/* 设备状态：运行 */
	.machine-run{
		color: #17B38B;
		font-weight: bold;
		font-size: 25px;
	}
	.text-run{
		color: #24AC6E;
	}
	/* 设备状态：报警 */
	.machine-alarm{
		color: #ED1C24;
		font-weight: bold;
		font-size: 25px;
	}
	.text-alarm{
		color: #E73232;
	}
	/* 设备状态：离线 */
	.machine-off{
		color: #909090;
		font-weight: bold;
		font-size: 25px;
	}
	.text-off{
		color: #909090;
	}
	
	/* 设备状态：暂停 */
	.machine-stop{
		color: #FBB03B;
		font-weight: bold;
		font-size: 25px;
	}
	.text-stop{
		color: #FE6B01;
	}
	/* 设备状态：调机 */
	.machine-debug{
		color: #3E55A3;
		font-weight: bold;
		font-size: 25px;
	}
	.text-debug{
		color: #3E55A3;
	}
	.aa {
		width: 44%;
		height: 100px;
		background: #4a4a4af2;
		margin-top: -100px;
		margin-left: 6px;
		border-radius: 10px;
		position: absolute;
	}
	.aa image {
		width: 80px;
		height: 80px;
		/* margin: 16%; */
		/* text-align: center; */
		position: absolute;
		top: 10%;
		left: 25%;
	}
</style>
